<!--  -->
<template>
  <div>
    <!-- 检索框 -->
    <el-form :inline="true" style="float: left;">
      <el-form-item>
        <el-input
          clearable
          v-model="searchForm.username"
          placeholder="报表信息"
        ></el-input>
      </el-form-item>
      <el-date-picker
        v-model="selectTime"
        type="daterange"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-form-item>
        <el-button type="primary" plain @click="getUserList">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-form :inline="true" class="download">
      <el-form-item>
        <el-button type="primary" plain @click="exportExcel">导出</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      downloadForm: {
        currPage: 1,
        pageSize: 100
      },
      searchForm: {
        username: ""
      },
      selectTime: [],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },

  //   components: {},

  //计算属性 类似data概念
  //   computed: {},

  //   mounted: {},

  //方法集合
  methods: {
    // test() {
    //   this.$utils.download(
    //     "/export/excel/tc/download",
    //     "post",
    //     this.downloadForm,
    //     "镍厂报表"
    //   );
    // },
    getUserList() {
      let date = {
        startTime: this.selectTime[0],
        endTime: this.selectTime[1]
      };

      this.searchForm.date = date;
      console.log(this.searchForm);
    },
    //报表导出
    exportExcel() {
      console.log("excel导出");
      //方式一 ：封装了fetch
      this.$utils.download(
        "/export/excel/tc/download",
        "post",
        this.downloadForm,
        "镍厂报表"
      );
      //原生fetch请求导出接口
      // fetch("http://localhost:9999/export/excel/tc/download", {
      //   method: "post",
      //   responseType: "blob",
      //   headers: {
      //     Authorization: localStorage.getItem("token"),
      //     "Content-Type": "application/json;charset=utf-8"
      //   },W
      //   body: JSON.stringify(this.downloadForm)
      // })
      //   .then(res => {
      //     return res.blob();
      //   })
      //   .then(res => {
      //     let blob = new Blob([res]);
      //     let downloadElement = document.createElement("a");
      //     let href = window.URL.createObjectURL(blob); //创建下载的链接
      //     downloadElement.href = href;
      //     downloadElement.download = "测试模板.xlsx"; //下载后文件名
      //     document.body.appendChild(downloadElement);
      //     downloadElement.click(); //点击下载
      //     document.body.removeChild(downloadElement); //下载完成移除元素
      //     window.URL.revokeObjectURL(href); //释放掉blob对象
      //   });

      //方式三: 但是无法传递token
      // window.location.href = "http://localhost:9999/download?fileName=" + '测试excel'
    }
  }
};
</script>
<style scoped></style>
